<template>
	<view class="search u-f-ac">
		<view class="s_left u-f-ac">
			<view class="all">{{id}}<text style="margin-left: 14rpx;">></text></view>
			<image src="/static/search.png" lazy-load />
			<input class="uni-input zdy_input" placeholder="搜索动作" :value="search" @input="clearInput" />
			<text class="uni-icon" style="color: #AAAAAA;" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
			<image src="/static/yuyin.png" style="margin-left: 50rpx;" lazy-load />
		</view>
		<view @click="goPage" class="smart u-f-ajc u-f1">
			<image src="../../../static/tianjia.png" lazy-load />
		</view>
	</view>
</template>

<script>
	
	export default {
    props: ['qx', 'id', 'planCourseId', 'index', 'experienceClass'],
		data() {
			return {
				showClearIcon: false,
				search: "",
			}
		},
		methods: {
			// 键盘事件监听 搜索
			clearInput: function(event) {
				this.search = event.detail.value;
				this.$emit("searchInput", this.search)
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			// 清除搜索框
			clearIcon: function() {
				this.search = '';
				this.showClearIcon = false;
			},
			goPage() {
				uni.navigateTo({
					url: '/pagesA/Preparation_plan/Add_action?qx='+this.qx+'&id='+this.id+'&planCourseId='+this.planCourseId+'&index='+this.index+'&experienceClass='+this.experienceClass,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "/common/uni.css";
	.search {
		padding: 10rpx 15rpx;
		background-color: #fff;

		.s_left {
			background-color: #EFEFEF;
			width: 85%;
			height: 70rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.all {
				color: #AAAAAA;
				padding-right: 20rpx;
				border-right: 1px solid #CCCCCC;
				margin-right: 8rpx;
				font-size: 24rpx;
			}

			>image {
				width: 34rpx;
				height: 34rpx;
			}

			.zdy_input {
				height: 70rpx;
				line-height: 70rpx;
				background-color: #EFEFEF;
				padding-left: 4rpx;
				width: 40%;
				font-size: 24rpx;
			}
		}
	}
	.smart {
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>
